<template>
	<!--POP画册、POP下单、道具下单-->
	<view class="page-content">
		<view class="page-top">
			<!-- 标题栏和状态栏占位符 -->
			<view class="titleNview-placing"></view>
			<!-- 标题+筛选 -->
			<template v-if="userType==='system'">
				<!--右侧一个图标-->
				<w-sel-search topType="two" :col_num="4" label_height="52" :pageobj="pageobj" popHeight="630"
					:leftIcon="is_check?'closeempty':'arrowleft'" :cenTit="page_title" cenType="title" iconfont="28"
					:is_back="false" @back="back" @resetFilterData="resetFilterData" @setFilterData="setFilterData" @selectRadioLabel="selectRadioLabel">
				</w-sel-search>
			</template>
			<template v-else-if="userType==='user'">
				<!--右侧两个图标-->
				<w-sel-search topType="two" r_icon_num="two" :col_num="4" label_height="52" :pageobj="pageobj"
					popHeight="630" leftIcon="arrowleft" :cenTit="page_title" cenType="title" iconfont="28"
					:is_back="false" @back="back" @itemClickT="itemClickT" @resetFilterData="resetFilterData"
					@setFilterData="setFilterData"  @selectRadioLabel="selectRadioLabel">
				</w-sel-search>
			</template>
			<view class="page-top-label" @click="totable">
				<view class="page-top-label-l">
					<image class="icon-bg" :src="$mAssetsPath.icon_biaoge"></image>
					<view class="title">表格文件</view>
				</view>
				<view class="page-top-label-r icons icon-gengduo"></view>
			</view>
		</view>
		<scroll-view class="page-body" :scroll-top="scrollTop" scroll-y="true" @scrolltolower="loadmore()"
			:style="{padding: userType==='system'?'0rpx 0 90rpx 0': userType==='user'?'0rpx 0 30rpx 0':''}">
			<!--动态-->
			<template v-if="objlist && objlist.length > 0 ">
				<view class="body-box">
					<view class="com-box-imgs" @longpress="longpress">
						<block v-for="(item,index) in objlist" :key="index">
							<!--首页-显示-->
							<template v-if="userType==='system'">
								<view class="com-box-cen" :style="{width:img_width + 'px',height:img_width +'px'}"
									@click.stop="tocheck(index,item.checked)">
									<image class="com-box-img" mode="aspectFill" :src="item.url"
										:style="{width:img_width + 'px',height:img_width +'px'}"></image>
									<view class="com-box-check" v-if="is_check"
										:style="{background:item.checked?'#198FFF':'rgba(0,0,0,.4)',border:item.checked?'#198FFF':' 1rpx solid rgba(255, 255, 255, 0.8)'}">
										<image class="com-box-checked" :src="$mAssetsPath.icon_zhengque"
											v-show="item.checked"></image>
									</view>
								</view>
							</template>
							<!--个人中心-显示-->
							<template v-else-if="userType==='user'">
								<view class="com-box-cen" :style="{width:img_width + 'px',height:img_width +'px'}"
									@click.stop="todelete(item.id)">
									<image class="com-box-img" mode="aspectFill" :src="item.url"
										:style="{width:img_width + 'px',height:img_width +'px'}"></image>
									<view class="com-box-delete">
										<image class="com-box-delete-icon" :src="$mAssetsPath.icon_shanchu2"></image>
									</view>
								</view>
							</template>
						</block>
					</view>
				</view>

				<!-- 上拉加载 -->
				<view class="det-con-more">
					<load-more :loadmore="load_more1"></load-more>
				</view>
			</template>
			<!--无数据-->
			<empty v-else no-full type="noData"></empty>
		</scroll-view>
		<view class="page-foot" v-if="userType==='system'">
			<view class="reset" @tap="sel_all(is_sel_all)">{{is_sel_all?'取消全选':'全选'}}</view>
			<view class="submit" @tap="confirm2">确定</view>
		</view>
		<!--编辑框-->
		<w-popup :show="showtip" :type="type1" @change="change1">
			<view class="w-tip">
				<view class="w-con">
					<view class="txt-row">是否确认删除？</view>
				</view>
				<view class="w-but">
					<view class="w-but-txt" @click="cancel('tip')">取消</view>
					<view class="w-but-txt" @click="confirm">确认</view>
				</view>
			</view>
		</w-popup>
	</view>
</template>

<script>
	import wSelSearch from '@/components/w-sel-logo/w-sel-search.vue'; //标题
	import loadMore from '@/components/uni-load-more/load-more.vue';
	import uPopup from "@/components/u-popup/u-popup.vue"; //弹窗
	import picLi from '@/pages/components/pic_book_li.vue';
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		getOssUploadsParams,
		getPictureLists, //画册图片/文件列表
		setPictureAttrs, //批量设置分类
		uploadPictureAlbumImgs, //画册的图片上传
		delPictureDatas, //删除图片
		
		getProductAttrLists, //pro-筛选列表

	} from '@/common/api.js';
	export default {
		components: {
			loadMore,
			picLi,
			wSelSearch,
			uPopup
		},
		data() {
			return {
				showtip: false, //是否显示弹窗2
				content1: '顶部弹 popup',
				type1: '', //弹窗显示方式

				scrollTop: 0,
				noData: false,
				load_more1: '', //下拉加载文字
				load_sta: false, //是否是加载状态
				page_title: '',
				pageobj: {
					name: '单选',
					type: 'radio',
					submenu: []
				},
				objlist: [],
				system: {
					w: 0,
					h: 0,
					scale: 1,
					systemScale: 1,
				},
				is_check: false,
				is_sel_all: false, //是否全选
				userType: '', //system-首页  user-用户
				params: {
					company_id: '',
					product_album_id: '',
					attr_arr: [],
					type: '',
					page: 1,
					limit: 30
				},
				uploads: {
					company_id: '',
					type: '',
					product_album_id: '',
					img_list: []
				},
				sourceType: ['album', 'camera'],
				chooseNum: 9,
				selImgId:'',
				pageType:'',
				pagedata:{
					company_id:'',
					top_id:''
				},
				task_id:'',
				selType:'',
			}
		},
		computed: {
			...mapGetters(['companyInfo', 'userInfo']),
			img_width() {
				return (this.system.w - 42) / 3;
			}
		},
		onShow() {
			uni.getSystemInfo().then(res => {
				let system = res[1]
				this.system.scale = 667 / 375 //按照苹果留 375*667比例 其他型号手机等比例缩放 显示
				this.system.systemScale = system.windowWidth / 375 //按照苹果留 375*667比例 其他型号手机等比例缩放 显示
				this.system.w = system.windowWidth;
				this.system.h = system.windowHeight;
			})
			this.getdata();
			this.getdata2();
		},
		onLoad(option) {
			console.log(222, option)
			this.params.company_id = this.companyInfo.id;
			this.uploads.company_id = this.companyInfo.id;
			this.pagedata.company_id = this.companyInfo.id;
			if (!!option.title) {
				this.page_title = option.title;
				if (!!option.id) {
					this.params.product_album_id = option.id;
					this.uploads.product_album_id = option.id;
				}
			}
			if (!!option.userType) {
				this.userType = option.userType
			}
			if(option.pageType){
				this.pageType = option.pageType;
			}
			if(option.task_id){
				this.task_id = option.task_id;
			}
			if (option.selType) {
				this.selType = option.selType
			}

		},
		methods: {
			resdata() {
				this.getdata();
			},
			getdata2() {
				if (this.pageType === 'pro') { //产品属性
					this.pagedata.top_id = 0;
					getProductAttrLists(this.pagedata).then(res => {
						if (res.code === 2000) {
							let pageobj = res.data;
							if (pageobj && pageobj.length > 0) {
								pageobj.forEach(item => {
									this.$set(item, 'submenu', Array);
									this.pagedata.top_id = item.id;
									getProductAttrLists(this.pagedata).then(res2 => {
										if (res2.code === 2000) {
											this.$nextTick(() => {
												item.submenu = res2.data;
												if(item.submenu && item.submenu.length>0){
													item.submenu.forEach(item2=>{
														this.$set(item2, 'selected', false)
													})
												}
											})
										}
									})
								})
							}
							this.pageobj.submenu = pageobj;
							console.log(555,this.pageobj)
						}
					})
					
				} else if (this.pageType === 'pop') { //pop
					this.pagedata.top_id = 0;
					getProductCodingLists(this.pagedata).then(res => {
						if (res.code === 2000) {
							let pageobj = res.data;
							if (pageobj && pageobj.length > 0) {
								pageobj.forEach(item => {
									this.$set(item, 'submenu', Array);
									this.$set(item, 'isOpen', false);
								})
							}
							this.pageobj = pageobj;
						}
					})
				} else if (this.pageType === 'prop') { //prop
					this.pagedata.top_id = 0;
					getProductCodingLists(this.pagedata).then(res => {
						if (res.code === 2000) {
							let pageobj = res.data;
							if (pageobj && pageobj.length > 0) {
								pageobj.forEach(item => {
									this.$set(item, 'submenu', Array);
									this.$set(item, 'isOpen', false);
								})
							}
							this.pageobj = pageobj;
						}
					})
				}
			},
			getdata() {
				this.params.type = 2;
				getPictureLists(this.params).then(res => {
					if (res.code === 2000) {
						this.objlist = res.data.data;
					}
				})
				
			},
			//标题右侧图标1 add 
			itemClickT() {
				let _self = this;
				this.uploads.type = 2;
				uni.chooseImage({
							count: this.chooseNum,
							sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
							sourceType: this.sourceType,
							success: (tempFilePaths) => {

								console.log('选择文件：', tempFilePaths)
								let _self = this;
								uni.showLoading({
									title: '上传中'
								});
								let uploadImgs = [];
								getOssUploadsParams().then(res => {
										if (res.code === 2000) {
											tempFilePaths.tempFilePaths.forEach((item, index) => {
													uploadImgs.push(new Promise((resolve, reject) => {
														let file_path = item;
														let filename = tempFilePaths.tempFiles[
															index];
														let suffix = "." + _self.getCaption(
															filename.path);
														let file_name = new Date().getTime() + Math
															.random().toString(
																36).substring(3, 20) + suffix
														console.log(333333, file_name, filename)
														/* [
															{'url':'xxx.jpg','product_id':[1,2.3],'type':1},
															{'url':000,'product_id':[1,2.3]},
															{'url':000,'product_id':[1,2.3]},
														] */
														//上传图片接口
														uni.uploadFile({
															url: res.data.host,
															filePath: file_path,
															fileType: 'image',
															name: 'file',
															formData: {
																name: file_path,
																'key': res.data.dir +
																	file_name,
																'policy': res.data.policy,
																'OSSAccessKeyId': res.data
																	.accessid,
																'success_action_status': '200',
																//让服务端返回200,不然，默认会返回204
																'signature': res.data
																	.signature,
															},
															success: (res2) => {
																resolve(res2);
																console.log(
																	'uploadImage success, res is:',
																	res2)
																let img_list = {
																	url: ''
																}
																img_list.url = res.data
																	.host + '/' + res
																	.data
																	.dir + file_name;
																_self.uploads.img_list
																	.push(img_list)
																console.log(666,
																	img_list)
															},
															fail: (err) => {
																console.log(err);
																reject(err);
															},
															complete: () => {
																//uni.hideLoading();
															}
														});
													}))
													Promise.all(uploadImgs).then((results) => { //执行所有需请求的接口
															if (index === (tempFilePaths.tempFilePaths.length - 1)) {
																	uni.navigateTo({
																		url: `/pages/picBook/createTask?company_id=${_self.uploads.company_id}&type=${_self.uploads.type}&product_album_id=${_self.uploads.product_album_id}&pageType=pro&img_list=${JSON.stringify(_self.uploads.img_list)}`
																	})
																}

																uni.hideLoading();
															})
														.catch((res3, object) => {
															uni.hideLoading();
														});
													})

											}
										})
								}
							});
					},
					getCaption(obj) {
						var index = obj.lastIndexOf("\.");
						obj = obj.substring(index + 1, obj.length);
						return obj;
					},
					//跳转表格页面
					totable() {
						uni.navigateTo({
							url: `/pages/tables/formFile?title=${this.page_title}`
						})
					},
					//全选
					sel_all(is_sel_all) {
						this.is_check = true;
						if (!is_sel_all) {
							if (this.objlist && this.objlist.length > 0) {
								this.objlist.forEach(item => {
									this.$set(item, 'checked', true)
								})
							}
						} else {
							if (this.objlist && this.objlist.length > 0) {
								this.objlist.forEach(item => {
									this.$set(item, 'checked', false)
								})
							}
						}
						this.is_sel_all = !is_sel_all;
					},
					
					confirm2(){
						console.log(333,this.objlist)
						let objlist = []
						if(this.objlist && this.objlist.length>0){
							this.objlist.forEach(item=>{
								if(item.checked){
									objlist.push(item)
								}
							})
						}
						uni.navigateTo({
							url:`/pages/user/batch?task_id=${this.task_id}&selType=${this.selType}&imglist=${JSON.stringify(objlist)}`
						})
					},
					//弹窗确认
					confirm() {
						delPictureDatas({id:this.selImgId,
						company_id:this.params.company_id}).then(res=>{
							if(res.code === 2000){
								uni.showToast({
									title:'删除成功！',
									icon:'none',
									duration:2000
								})
								this.showtip = false;
								this.getdata();
							}
						})
					},
					//返回
					back() {
						if (this.is_check) {
							this.is_check = false;
							if (this.objlist && this.objlist.length > 0) {
								this.objlist.forEach((item, ind) => {
									this.$set(item, 'checked', false)
								})
							}
						} else {
							uni.navigateBack({
								delta: 1
							})
						}
					},
					//选择
					tocheck(index, checked) {
						if (this.objlist && this.objlist.length > 0) {
							this.objlist.forEach((item, ind) => {
								if (ind === index) {
									item.checked = !checked;
								}
							})
						}
					},
					//删除
					todelete(id) {
						this.showtip = true;
						this.content1 = 'center';
						this.type1 = 'center';
						this.selImgId = id;
					},
					//长按
					longpress() {
						if (this.userType === 'system') {
							this.is_check = true;
							if (this.objlist && this.objlist.length > 0) {
								this.objlist.forEach((item, ind) => {
									this.$set(item, 'checked', false)
									/* if (ind === index) {
										this.$set(item, 'checked', true)
									} */
								})
							}
						}
						console.log(2, this.objlist)
					},
					//选中单选类label-UI状态
					selectRadioLabel(box_index, label_index) {
						let activeIndex = this.pageobj.submenu[box_index].submenu[label_index].name;
						console.log(123, activeIndex)
						if (this.pageobj.submenu && this.pageobj.submenu.length > 0) {
							this.pageobj.submenu.forEach((item, index) => {
								if (index === box_index) {
									if (item.submenu && item.submenu.length > 0) {
										item.submenu.forEach(item2 => {
											// /this.$set(item2, 'selected', false)
											if (item2.name === activeIndex) {
												item2.selected = !item2.selected
											}else{
												item2.selected = false
											}
										})
									}
								}
							})
						}
						this.$forceUpdate();
					},
					//重置筛选
					resetFilterData() {

					},
					//确认筛选
					setFilterData() {
						console.log(444,this.pageobj)
						let sort = [];
						let label = [];
						if (this.pageobj.submenu && this.pageobj.submenu.length > 0) {
							this.pageobj.submenu.forEach((item, index) => {
								if (item.submenu && item.submenu.length > 0) {
									item.submenu.forEach((item2, ind) => {
										console.log(1111111, item, item2)
										if (item2.selected) {
											label.push(item2.id)
										}
									})
								}
							})
						}
						this.params.attr_arr = label
						this.getdata()
					},
					loadmore() {

					},
					//取消
					cancel() {
						this.show = false
						this.showtip = false
					},
					change1(e) {
						if (!e.show) {
							this.showtip = false
						}
					},
			}
		}
</script>

<style lang="scss">
	/* 提示窗口 */
	.w-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		width: 70vw;
		border-radius: 10rpx;
		background-color: #fff;
		box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
		margin: 30rpx auto 0;

		.w-tit {
			font-size: 36rpx;
			font-weight: bold;
			color: $font-color-3;
			line-height: 60rpx;
			height: 60rpx;
			margin-top: 20rpx;
			text-align: center;
		}

		.w-but {
			display: flex;
			font-size: 32rpx;
			font-weight: 400;
			color: $font-color-b3;
			height: 84rpx;
			line-height: 84rpx;

			.w-but-txt {
				flex: 1;
				text-align: center;
				border-right: 1rpx solid #f5f5f5;
			}

			.w-but-txt:last-of-type {
				border-right: none;
			}
		}

		.w-con {
			display: flex;
			text-align: center;
			font-weight: 400;
			padding: 60rpx 30rpx;
			border-bottom: 1rpx solid #f5f5f5;

			.txt-row {
				width: 100%;
				text-align: center;
				font-size: 32rpx;
				color: $font-color-3;
			}

			.input-row {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 66rpx;
				background: #fff;
				border-radius: 10rpx;
				background: $uni-bg-color-grey;

				.icon-tb3 {
					width: 34rpx;
					height: 34rpx;
					margin: 0 20rpx;
				}

				.input-row-w {
					padding-left: 30rpx;
					text-align: left;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 20px;
					color: $font-color-9;
					width: calc(100% - 74rpx);
				}
			}
		}
	}

	.titleNview-placing {
		height: var(--status-bar-height);
		box-sizing: content-box;
		background: $uni-bg-color;
		display: block;
		position: sticky;
		top: 0rpx;
		z-index: 9999;
		overflow: hidden
	}

	.page-content {
		width: 100vw;
		height: 100%;

		.page-top {
			display: flex;
			flex-direction: column;
			box-sizing: content-box;
			background: $uni-bg-color;
			display: block;
			position: sticky;
			top: 0rpx;
			z-index: 9999;
			border-bottom: 1rpx solid #F2F4F5;

			.page-top-label {
				display: flex;
				padding: 0 30rpx;
				justify-content: space-between;
				height: 90rpx;
				line-height: 90rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: $font-color-3;
				background: $uni-bg-color-grey;

				.page-top-label-r {
					color: $font-color-9;
				}

				.page-top-label-l {
					display: flex;
					align-items: center;

					.icon-bg {
						width: 32rpx;
						height: 32rpx;
						margin-right: 20rpx;
					}

					.title {
						font-size: 32rpx;
						font-weight: 400;
						line-height: 22px;
						color: $font-color-3;
					}
				}
			}
		}

		.page-foot {
			width: 100%;
			position: fixed;
			z-index: 3;
			left: 0;
			right: 0;
			bottom: 0;
			height: 90rpx;
			display: flex;
			flex-shrink: 0;
			flex-direction: row !important;
			align-items: center;
			font-size: 28rpx;
			font-weight: bold;
			line-height: 90rpx;
			color: $font-color-w;

			.reset {
				text-align: center;
				flex: 1;
				background: #FE5252;
			}

			.submit {
				text-align: center;
				flex: 2;
				background-color: #198FFF;
			}
		}

		.page-body {
			display: flex;
			height: calc(100% - 180rpx - var(--status-bar-height));

			.body-box {
				display: flex;
				flex-direction: column;
				background: $uni-bg-color;
				padding: 30rpx 30rpx 0 30rpx;
				margin-bottom: 20rpx;

				.com-box-imgs {
					display: flex;
					flex-wrap: wrap;
					margin-bottom: 24rpx;

					.com-box-cen {
						position: relative;
						margin-right: 12rpx;
						margin-top: 12rpx;

						.com-box-img {
							border-radius: 10rpx;
						}

						.com-box-delete {
							position: absolute;
							right: 10rpx;
							top: 10rpx;
							width: 48rpx;
							height: 48rpx;
							z-index: 2;
							border-radius: 24rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							background: rgba(0, 0, 0, .5);

							.com-box-delete-icon {
								width: 30rpx;
								height: 30rpx;
							}
						}

						.com-box-check {
							position: absolute;
							right: 10rpx;
							top: 10rpx;
							width: 48rpx;
							height: 48rpx;
							z-index: 2;
							border-radius: 24rpx;
							display: flex;
							justify-content: center;
							align-items: center;

							.com-box-checked {
								width: 30rpx;
								height: 30rpx;
							}
						}
					}

					.com-box-cen:nth-of-type(3n) {
						margin-right: 0rpx;
					}
				}
			}

			.con-text {
				display: flex;
				flex-direction: column;
				font-size: 28rpx;
				color: #666;
				line-height: 50rpx;

				image {
					width: 100% !important;
					max-width: 100% !important;
				}
			}
		}
	}
</style>
